import type { FC } from 'react';
import { useMemoizedFn } from 'ahooks';
import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
import { TouchableOpacity, View } from 'react-native';
import Feather from '@expo/vector-icons/Feather';
import MoreMenu from '@/components/MoreMenu';
import { Modal, message } from '@/components';
import { errorColor } from '@/constants/Colors';
import styles from './styles';

const MoreButton: FC = () => {
  const onLeave = useMemoizedFn(async () => {
    return new Promise<boolean>((r) => {
      Modal.confirm({
        danger: true,
        okText: 'Leave',
        title: 'Are you sure you want to exit?',
        content: 'After exiting the activity, you will not be able to enter again.',
        onOk: () => {
          r(true);
          message.success('Successfully exited.')
          return true;
        }
      });
    }) 
  });

  return (
    <View style={styles.wrapper}>
      <MoreMenu
        items={[
          {
            key: 'leave',
            title: 'Leave',
            onPress: onLeave,
            iconColor: '#fff',
            iconBgColor: errorColor,
            icon: <FontAwesome5 name="door-open" />
          }
        ]}
      >
        <TouchableOpacity
          style={styles.moreBtn}
        >
          <Feather
            size={20}
            color="#333"
            name="more-horizontal"
          />
        </TouchableOpacity>
      </MoreMenu>
    </View>
  );
}

export default MoreButton;